<template>
  <HiBorderBox13
    class="hi-border-box-13"
    :height="height"
    :width="width"
  >
    <section
      v-if="!isEmpty(title)"
      class="title-wrap"
    >
      <section class="left" />
      <section class="center">
        &nbsp;&nbsp;{{ title }}&nbsp;&nbsp;
      </section>
      <section class="right" />
    </section>

    <section
      :class="isEmpty(title) ? 'title-default' : 'title-content'"
    >
      <slot />
    </section>
  </HiBorderBox13>
</template>

<script lang="ts" setup>

import { isEmpty } from '@/utils';

defineProps({
  title: {
    type: String,
    default: ''
  },
  width: {
    type: Number,
    default: 540,
  },
  height: {
    type: Number,
    default: 310,
  },
});
</script>

<style scoped lang="scss">
$item-title-height: 38px;
$item-title-content-height: calc(100% - 38px);

.hi-border-box-13 {
  box-sizing: border-box;
  padding: 6px 16px 0;

  .title-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: $item-title-height;
    line-height: $item-title-height;
    color: #31abe3;
    text-align: center;

    .left,
    .right {
      width: 58px;
      height: 14px;
      background-image: url('../../../assets/images/titles/arrow-right.png');
    }

    .right {
      transform: rotate(180deg);
    }

    .center {
      font-weight: 900;
      letter-spacing: 2px;
      background:
        linear-gradient(
          92deg,
          #0072ff 0%,
          #00eaff 48.85%,
          #01aaff 100%
        );
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
